import React from 'react'
import PropTypes from 'prop-types'
import { inject, observer } from 'mobx-react'
import Avatar from 'material-ui/Avatar'
import UserIcon from 'material-ui-icons/AccountCircle'
import { withStyles } from 'material-ui/styles'
import Container from '../layout/container'
import userStyle from './styles/user'

@inject(stores => ({
  user: stores.appState.user,
})) @observer

class User extends React.Component {
  componentDidMount() {

  }

  render() {
    const { classes } = this.props
    const userInfo = this.props.user.info || {}

    return (
      <Container>
        <div className={classes.root}>
          <div className={classes.bg} />
          <div className={classes.info}>
            {
              userInfo.avatar_url ?
                <Avatar className={classes.avatarImg} src={userInfo.avatar_url} /> :
                <Avatar className={classes.avatarImg}>
                  <UserIcon />
                </Avatar>
            }
            <div className={classes.userName}>{userInfo.loginname || '未登录'}</div>
          </div>
        </div>
        {this.props.children}
      </Container>
    )
  }
}

User.wrappedComponent.propTypes = {
  user: PropTypes.object.isRequired,
}

User.propTypes = {
  classes: PropTypes.object.isRequired,
  children: PropTypes.element.isRequired,
}

export default withStyles(userStyle)(User)
